<script setup lang="ts">
import { useUserStore } from "@/store/modules/user"
import { reactive, ref } from "vue"
import { IUserInfoData } from "@/api/login/types/login"
import { FormInstance, FormRules } from "element-plus"
import { Switch, User } from "@element-plus/icons-vue"
import { resetAdminPasswordApi } from "@/api/student"
import { showPromptMessage } from "@/utils"
import { updateOneselfApi } from "@/api/admin"
import { password } from "@/utils/validate"

const userStore = useUserStore()
const userInfo = ref<IUserInfoData>(userStore.userInfo as IUserInfoData)
const updateDialogVisible = ref(false)
const passwordFormRef = ref<FormInstance>()
const updateFormRef = ref<FormInstance>()
const changePasswordData = ref<{
  newPass: string
  confirm: string
}>({
  newPass: "",
  confirm: ""
})
const uploadFormData = ref<{
  personalPhone: string
  officialPhone: string
}>({
  personalPhone: "",
  officialPhone: ""
})

const validatePassword = (__rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"))
  } else if (!password(value)) {
    callback(new Error("至少包含字母、数字且长度为6-16位"))
  } else {
    callback()
  }
}

const passwordDialogVisible = ref(false)
const rules = reactive<FormRules>({
  newPass: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { validator: validatePassword, trigger: "blur" }
  ],
  confirm: [{ required: true, message: "请确认密码", trigger: "blur" }]
})

const handleChangePassword = () => {
  if (changePasswordData.value.confirm !== changePasswordData.value.newPass) {
    changePasswordData.value.confirm = ""
    return showPromptMessage("error", "两次密码不一致")
  }
  passwordFormRef.value?.validate((valid) => {
    if (valid) {
      resetAdminPasswordApi({ password: changePasswordData.value.newPass, username: userInfo.value.username })
        .then(() => {
          showPromptMessage("success", "修改成功")
        })
        .finally(() => {
          passwordDialogVisible.value = false
        })
    } else {
      return false
    }
  })
}

const handleUpdate = () => {
  updateFormRef.value?.validate((valid) => {
    if (valid) {
      updateOneselfApi({
        id: userInfo.value.id,
        officialPhone: uploadFormData.value.officialPhone,
        personalPhone: uploadFormData.value.personalPhone
      })
        .then(() => {
          userInfo.value.officialPhone = uploadFormData.value.officialPhone
          userInfo.value.personalPhone = uploadFormData.value.personalPhone
          showPromptMessage("success", "修改成功")
        })
        .finally(() => {
          updateDialogVisible.value = false
        })
    } else {
      return false
    }
  })
}

const resetPasswordForm = () => {
  passwordFormRef.value?.resetFields()
}
</script>

<template>
  <div class="app-container">
    <el-card v-if="userInfo" shadow="never">
      <template #header>
        <div class="card-header">
          <span>管理员信息</span>
        </div>
      </template>
      <div class="flex flex-col items-center">
        <el-form class="mt-5" label-position="left" label-width="80px" :model="userInfo" style="max-width: 460px">
          <el-form-item label="姓名">
            <el-input disabled v-model="userInfo.name" />
          </el-form-item>
          <el-form-item label="工号">
            <el-input disabled v-model="userInfo.username" />
          </el-form-item>
          <el-form-item label="性别">
            <el-input disabled v-model="userInfo.sex" />
          </el-form-item>
          <el-form-item label="个人电话">
            <el-input disabled v-model="userInfo.personalPhone" />
          </el-form-item>
          <el-form-item label="办公电话">
            <el-input disabled v-model="userInfo.officialPhone" />
          </el-form-item>
        </el-form>
        <div class="flex">
          <div>
            <el-button type="success" @click="passwordDialogVisible = true">
              <el-icon>
                <Switch />
              </el-icon>
              <span class="ml-2"> 修改密码 </span></el-button
            >
          </div>

          <div class="ml-2">
            <el-button
              type="primary"
              @click="
                () => {
                  uploadFormData.personalPhone = userInfo.personalPhone
                  uploadFormData.officialPhone = userInfo.officialPhone
                  updateDialogVisible = true
                }
              "
            >
              <el-icon>
                <User />
              </el-icon>
              <span class="ml-2"> 修改资料 </span></el-button
            >
          </div>
        </div>
      </div>
    </el-card>
    <!--    修改密码-->
    <el-dialog @closed="resetPasswordForm" v-model="passwordDialogVisible" title="修改密码" width="30%" align-center>
      <div>
        <el-form
          :rules="rules"
          label-position="left"
          label-width="80px"
          ref="passwordFormRef"
          :model="changePasswordData"
          style="max-width: 460px"
        >
          <el-form-item label="新密码" prop="newPass">
            <el-input
              placeholder="至少包含字母、数字且长度为6-16位"
              show-password
              v-model="changePasswordData.newPass"
            />
          </el-form-item>
          <el-form-item label="确认密码" prop="confirm">
            <el-input
              placeholder="至少包含字母、数字且长度为6-16位"
              show-password
              v-model="changePasswordData.confirm"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="passwordDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleChangePassword"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改个人资料 -->
    <el-dialog @closed="resetPasswordForm" v-model="updateDialogVisible" title="修改资料" width="30%" align-center>
      <div>
        <el-form
          label-position="left"
          label-width="80px"
          ref="updateFormRef"
          :model="uploadFormData"
          style="max-width: 460px"
        >
          <el-form-item label="个人电话" prop="personalPhone">
            <el-input v-model="uploadFormData.personalPhone" />
          </el-form-item>
          <el-form-item label="办公电话" prop="officialPhone">
            <el-input v-model="uploadFormData.officialPhone" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="updateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleUpdate"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.upload {
  border: 1px dashed var(--el-border-color);
  box-sizing: border-box;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 175px;
  aspect-ratio: 35/53;
  transition: var(--el-transition-duration-fast);
}

.upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
